<template>
	<div id="longCourseCard-list" class="longCourseCard-list">
		<el-card class="box-card" v-for="(v, i) in tableData" :key="i">
			<div class="clearfix learn_course_wrapper">
				<div class="l-img img-hover">
					<img :src="coverImg(v)" />
				</div>
				<div class="r-txt">
					<h2>{{ v.title }}</h2>
					<div class="tag">
						<el-tag v-for="(a, b) in labelValues(v.labelValue)">{{ a }}</el-tag>
					</div>
					<ul>
						<li>
							<span>建设单位：</span>
							<span>{{ v.extFiled2 }}</span>
						</li>
						<li>
							<span>学习时长：</span>
							<span>{{ v.sumHours }}</span>
						</li>
						<li>
							<span>授课教师：</span>
							<span>{{ v.sysCourseTeamList.map((v) => v.userName).toString() }}</span>
						</li>
						<li>
							<span>开课时间：</span>
							<span>{{ v.startTime }} - {{ v.endTime }}</span>
						</li>
					</ul>
					<div class="button">
						<el-button type="primary" @click="experienceStudy(true)" round>开始学习</el-button>
						<el-button type="warning" @click="handleStartExam()" plain round>立即考试</el-button>
					</div>
				</div>
			</div>
		</el-card>
	</div>
</template>

<script>
import moment from 'moment';
import setInfo from '@/mixins/setInfo';
import { sysCourseStudentQueryOne, sysCourseStudentAdd } from '@/api/admin/courseLibrary/sysCourseStudent.js';
export default {
	mixins: [setInfo],
	components: {
		concernedLog: () => import('@/components/home/concernedLog.vue'),
		Score: () => import('@/components/home/score.vue')
	},
	data() {
		return {
			studyType: false,
			showbtm: true,
			queryMode: ''
		};
	},
	props: ['tableData'],
	mounted() {
		this.queryMode = this.$route.query.queryMode;
	},
	methods: {
		toCourseDetail(row) {
			this.$store.commit('SETCURCOURSE', row);
			this.$router.push({
				name: 'specialty-detail',
				query: { courseId: row.id }
			});
		},
		//  体验学习 1   开始学习 2
		experienceStudy(type) {
			this.$emit('change', type); // 1 体验学习
		},

		labelValues(val) {
			return val.split(',');
		},

		//开始学习
		async handleLearn() {
			// 1.判断有没有登录
			let userId = this.$store.getters.userId;
			if (!userId) {
				this.loginTip();
				return;
			}
			//2.判断课程有无课件资源
			if (!this.resData.length) {
				this.warnMsg('本课程暂无学习资源');
				return;
			}
			//3.判断有没有加入学习
			let joinFlag = await this.checked();
			if (joinFlag) {
				await this.handleJoin();
			}
			//4.跳转
			let courseObj = this.tableData[0];
			//   return
			this.$router.push({
				name: 'training-detail',
				query: { id: courseObj.id }
			});
			// this.$router.push({
			//   name: 'course-home-play',
			//   query: { id: courseObj.id },
			// })
		},

		//开始考试
		async handleStartExam() {
			console.log('123123');
		}
	}
};
</script>

<style lang="scss">
.learn_course_wrapper {
	display: flex;
	.l-img {
		width: 500px;
		height: 340px;
	}
	.r-txt {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 30px;
		flex: 1;
	}
	.tag {
		margin: 20px 0;
		.el-tag {
			margin-left: 8px;
			&:first-child {
				margin-left: 0;
			}
		}
	}
	.button {
		flex-shrink: 0;
	}
	h2 {
		font-size: 24px;
		line-height: 1.5;
		color: #ac100f;
	}
	ul {
		font-size: 16px;
		line-height: 2;
		flex: 1;
	}
	.el-button {
		padding: 10px 20px;
		font-size: 18px;
		&.el-button--primary {
			background-color: #ac100f;
			border-color: #ac100f;
		}
	}
}
.longCourseCard-list {
	width: 100%;
	margin-bottom: 30px;
	.box-card {
		width: 1398px;
		margin: 0 auto;
	}
}
</style>
<style scoped></style>
